<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <link rel="stylesheet" href="register.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1779796_5nx07je1vd6.css">
</head>

<body>
    <div class="tbody">
        <div class="shadow">
            <div class="shadow_left clear">
                <img src="img/logo.svg" alt="">
                <h2 class="left_title">
                    云端软件开发协作平台
                </h2>
                <div class="left_content clear">
                    <div class="left_name">
                        <span>韩卿</span>
                        <span>Apache Kylin</span>
                    </div>
                    <div class="left_contents">
                        Gitee 为中国开发者提供了更好的本地化能力和服务，在促进中国开源发展上贡献巨大，非常期待 Gitee 更上层楼。
                    </div>


                </div>
                <div class="left_footer clear">
                    <hr class="hr" />
                    <span class="myqyb">码云企业版</span>
                    <span class="jian">-</span>
                    企业级软件协作开发管理平台
                </div>
            </div>
            <div class="shadow_right">
                <div class="form clear">
                    <div class="form_header">
                        <span class="register_title">注册</span>
                        <span class="login_title">
                            <span class="haveaccount">已有账号?</span>
                            <a href="login.html">点此登陆</a>
                        </span>
                    </div>
                    <div class="proving" id="div_name">
                        <input class="register_name" id="register_name" type="text" placeholder="姓名">
                        <div class="message message_name"></div>
                        <i class="icon iconfont icon-cha-copy err_name"></i>
                    </div>
                    <div class="proving" id="div_host">
                        <div id="mrhost">
                            <div class="mrhost">
                                https://gitee.com/
                            </div>
                            <div class="userZone">
                                <input class="register_zone" id="register_zone" type="text" placeholder="个人空间地址">
                                <i class="icon iconfont icon-iconset0143-copy"></i>
                            </div>
                        </div>
                        <div class="message message_zone"></div>
                        <i class="icon iconfont icon-cha-copy err_zone"></i>
                    </div>
                    <div class="proving" id="div_phone">
                        <input class="register_phone" id="register_phone" type="text" placeholder="手机或邮箱">
                        <div class="message message_phone"></div>
                        <i class="icon iconfont icon-cha-copy err_phone"></i>
                    </div>
                    <div class="proving" id="div_password">
                        <input class="register_password" id="register_password" type="password" placeholder="密码不少于6位">
                        <i class="icon iconfont icon-caozuo-xianshihaoma eyes"></i>
                        <div class="message message_password"></div>
                        <i class="icon iconfont icon-cha-copy err_password"></i>
                    </div>
                    <div class="xieyi">
                        <input type="checkbox" class="xieyi_check">
                        <div class="xie_word">我已阅读并同意
                            <span class="register case">
                                <a href="">使用条款</a>
                                及
                                <a href="">非活跃帐号处理规范</a>
                            </span>
                        </div>
                    </div>
                    <div class="register_btn">
                        <button class="submit">立即注册</button>
                    </div>
                    <div class="osLogin clear">
                        <div class="oschina">
                            <img src="img/oschina.png" alt="">
                            <span> 使用 OSChina 帐号登录</span>
                        </div>
                        <div class="otherLogin clear">
                            <hr />
                            <p>其他方式登陆</p>
                        </div>
                        <div class="logins">
                            <img src="img/weixin.png" alt="">
                            <img src="img/QQ.png" alt="">
                            <img src="img/github.png" alt="">
                            <img src="img/other.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer clear">
            <span class="lianjie clear">
                <a href="">© Gitee.com</a>
                <a href="">关于我们</a>
                <a href="">使用条款</a>
                <a href="">帮助文档</a>
                <a href="">在线自助服务</a>
                <a href="">©重发激活邮件</a>
            </span>
        </div>
    </div>
</body>
<script>
    var nameflag = false
    var zoneflag = false
    var passwordflag = false
    var phoneflag = false
    var username = document.querySelector(".register_name");
    var userzone = document.querySelector(".register_zone");
    var usernameReg = /^[a-zA-Z][0-9a-zA-Z_-]{1,9}$/g
    var userphone = document.querySelector(".register_phone");
    var userphoneReg = /^1[356789][0-9]{9}$/g
    var useremailReg = /^[1-9a-z][0-9a-z]{5,}@[0-9a-z]{2,5}\.(com|cn)$/ig
    var userpassword = document.querySelector(".register_password");
    var userpasswordReg = /^[a-zA-Z0-9!@_#$%^&*()-+=,.?]{1}([a-zA-Z0-9]|[!@_#$%^&*()-+=,.?]){5,19}$/;

    username.onblur = function () {
        var usernameValue = username.value
        var usernameFlag = listReg(usernameReg, usernameValue, "name", "仅支持至少两位，中文/英文/下划线/中划线/圆括号，不能以下划线/中划线开头或结尾")
    }
    userzone.onblur = function () {
        var userzoneValue = userzone.value
        var userzoneFlag = listReg(usernameReg, userzoneValue, "zone", "仅支持至少两位，中文/英文/下划线/中划线/圆括号，不能以下划线/中划线开头或结尾")
    }
    userphone.onblur = function () {
        var userphoneValue = userphone.value
        if (userphoneValue.indexOf("@") > 0) {
            var useremailFlag = listReg(useremailReg, userphoneValue, "phone", "请输入正确的手机号码（支持澳门台湾）或邮箱")
        } else {
            var userphoneFlag = listReg(userphoneReg, userphoneValue, "phone", "请输入正确的手机号码（支持澳门台湾）或邮箱")
        }
    }
    userpassword.onblur = function () {
        var userpasswordValue = userpassword.value
        var userpasswordFlag = listReg(userpasswordReg, userpasswordValue, "password", "密码必须包含数字，且必须包含字母或其它符号（!@_#$%^&*()-+=,.?）")
    }
    function listReg(reg, str, type, word) {
        var message = document.querySelector(`.message_${type}`)
        var errr = document.querySelector(`.err_${type}`)
        if (str == "") {
            var errtitle = ""
            if (type == "name") {
                errtitle = "姓名"
            } else if (type == "zone") {
                errtitle = "个人空间地址"
            } else if (type == "phone") {
                errtitle = "手机或邮箱"
            } else if (type == "password") {
                errtitle = "密码"
            }
            message.innerHTML = `${errtitle}为必填项`
            errr.style.display = "inline"
        } else {
            if (reg.test(str)) {
                message.innerHTML = ""
                errr.style.display = "none"
                if (type == "name") {
                    nameflag = true
                } else if (type == "zone") {
                    zoneflag = true
                } else if (type == "phone") {
                    phoneflag = true
                } else if (type == "password") {
                    passwordflag = true
                }
                return true
            } else {
                message.innerHTML = word
                errr.style.display = "inline"
                if (type == "name") {
                    nameflag = false
                } else if (type == "zone") {
                    zoneflag = false
                } else if (type == "phone") {
                    phoneflag = false
                } else if (type == "password") {
                    passwordflag = false
                }
                return false
            }
        }
    }

    var tab = document.querySelector(".eyes")
    tab.onclick = function (e) {
        if (tab.getAttribute("class").indexOf("icon-caozuo-xianshihaoma") > -1) {
            userpassword.type = "text"
            tab.classList.remove("icon-caozuo-xianshihaoma")
            tab.classList.add("icon-yincangmima")
        } else {
            userpassword.type = "password"
            tab.classList.add("icon-caozuo-xianshihaoma")
            tab.classList.remove("icon-yincangmima")
        }
    }
    var registerBtn = document.querySelector(".submit")
    registerBtn.onclick = function () {
        if (nameflag && zoneflag && passwordflag && phoneflag) {
            alert("注册成功")
        } else {
            alert("格式错误")
        }
    }
</script>

</html>